<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="./css/header.css" />
    <script src="./js/jquery.js"></script>
    <script src="./js/bootstrap.js"></script>
    <title>Document</title>
    <style>
      #mainer {
        min-height: calc(100vh - 170px);
        width: 80%;
        margin: auto;
      }
      .title {
        text-align: center;
      }
      .time {
        text-align: center;
        font-size: 15px;
        opacity: 0.5;
      }
      .thumbnail .panel-img {
        height: 180px;
      }

      .thumbnail .panel-caption a {
        color: #00bfff;
        font-size: 20px;
      }
      .thumbnail .panel-caption a:hover {
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <div id="bg">
      <div id="header"></div>
      <div id="mainer">
        <div id="info">
          <h3 class="title">这是标题</h3>
          <h4 class="time">这是时间</h4>
          <div id="content">这是内容</div>
        </div>
        <div id="recommend">
          <div class="page-header" style="margin-top: 15px; color: #00bfff">
            <span class="glyphicon glyphicon-star"></span>更多科普
          </div>
          <div id="recombox" class="row"></div>
        </div>
      </div>

      <div id="footer"></div>
    </div>
    <script>
      //格式化时间
      function formatDate(item) {
        let time = new Date(item);
        let y = time.getFullYear();
        let m = (time.getMonth() + 1).toString().padStart(2, "0");
        let d = time.getDate().toString().padStart(2, "0");
        item = y + "-" + m + "-" + d;
        return item;
      }
      $(function () {
        $("#header").load("./header.html");
        $("#footer").load("./footer.html");
        var id = document.location.search.split("=")[1];
        $.ajax({
          type: "get",
          url: "/aquatic/info?id=" + id,
          success: (res) => {
            res.data.date = formatDate(res.data.date);
            var html = `
            <h3 class="title">${res.data.title}</h3>
      <h4 class="time">时间：${res.data.date}</h4>
        <div id="content">
          ${res.data.content}
        </div>
            `;
            $("#info").html(html);
          },
          error: (xhr, status, error) => {
            console.log("出错了", error);
          },
        });
        $.ajax({
          type: "get",
          url: "/aquatic/more",
          success: (res) => {
            var html = "";
            res.data.forEach((item) => {
              html += ` <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
              <img class="panel-img" src="${item.img}" alt="图片" />
              <div class="caption panel-caption">
                <div style="text-align:center; text-overflow: ellipsis;overflow: hidden;
white-space: nowrap;"><a href='infocontent.html?id=${item._id}'>${item.title}</a></div>
              </div>
            </div>
          </div>`;
            });
            $("#recombox").html(html);
          },
          error: (xhr, status, error) => {
            console.log("出错了", error);
          },
        });
      });
    </script>
  </body>
</html>
